<template>
  <el-row v-if="store.getters.showSchema == 'card'" justify="space-between">
    <el-col :span="5" v-for="(item, index) in siteList.hotList" :key="item.siteName">
      <div :style="index >= 4 ? { 'margin-top': '50px' } : {}">
        <HotCard :site="item"></HotCard>
      </div>
    </el-col>
  </el-row>
  <div v-if="store.getters.showSchema == 'list'">
    <el-row>
      <el-col :span="5"></el-col>
      <el-col :span="12">
        <HotList :siteList="siteList.hotList"></HotList>
      </el-col>
      <el-col :span="5">
        <HotListRight></HotListRight>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { reactive } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'

import { getMySiteAsCard } from '@/api/u/manager'
import HotCard from './component/HotCard.vue'
import HotList from './component/HotList.vue'
import HotListRight from './component/HotListRight.vue'

export default {
  name: 'HotCardIndex',
  components: { HotCard, HotList, HotListRight },
  setup() {
    const store = useStore()
    const siteList = reactive({
      hotList: []
    })
    const test = () => {
      getMySiteAsCard()
        .then((result) => {
          siteList.hotList = result
        })
        .catch((err) => {
          ElMessage.error('资源获取失败')
        })
    }

    test()
    return { siteList, store }
  }
}
</script>

<style scoped></style>
